<template>
    <div class="chat-history">
        <el-descriptions class="margin-top" title="聊天室信息" :column="3" :size="size" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user/>
                        </el-icon>
                        房主名称
                    </div>
                </template>
                {{ data.chatRoomDetail.houseUserName }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <iphone/>
                        </el-icon>
                        聊天人名称
                    </div>
                </template>
                {{ data.chatRoomDetail.chatUserName }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <location/>
                        </el-icon>
                        创建时间
                    </div>
                </template>
                {{ data.chatRoomDetail.createTime }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <tickets/>
                        </el-icon>
                        学校
                    </div>
                </template>
                {{ data.chatRoomDetail.schoolName }}
            </el-descriptions-item>
        </el-descriptions>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>聊天历史</span>
                </div>
            </template>
            <div>
                <el-row>
                    <el-col :span="24">
                        <el-timeline>
                            <el-timeline-item
                                v-for="(chatMessage,index) in data.chatMessageHistory"
                                :key="index"
                                :timestamp="chatMessage.createTime"
                            >
                                <el-avatar :src="chatMessage.sendUserAvatar" class="chat-avatar"/>
                                <el-tag class="chat-name">{{ chatMessage.sendUserName }}</el-tag>
                                <el-card :body-style="{ padding: '0px' }">
                                    <div style="padding-left: 10px;">
                                        <p style="font-size: 14px;">{{ chatMessage.content }}</p>
                                    </div>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <div class="page">
            <el-pagination background layout="prev, pager, next" :total="data.chatMessageHistoryTotal" @current-change="currentChange"/>
        </div>
    </div>
</template>

<script>
import {reactive, onMounted} from 'vue'
import {detail} from '@/api/chat/chatRoom'
import {useRoute} from "vue-router";
import {pageHistory} from "@/api/chat/chatMessage";

export default {
    setup() {
        const route = useRoute();
        const data = reactive({
            chatRoomDetail: '',
            chatRoomUuid: route.query.uuid,
            chatMessageHistory: [],
            chatMessageHistoryTotal: 0,
        })
        const chatMessageSearchParam = reactive({
            page: 1,
            size: 6,
            sendUserUuid: '',
            receiveUserUuid: '',
        })
        /**
         * 查询详情
         */
        const chatRoomDetail = () => {
            detail(data.chatRoomUuid).then(res => {
                data.chatRoomDetail = res.data
                chatMessageSearchParam.sendUserUuid = data.chatRoomDetail.houseUserUuid
                chatMessageSearchParam.receiveUserUuid = data.chatRoomDetail.chatUserUuid
                getChatMessageHistory()
            })
        }
        /**
         * 获取历史聊天记录
         */
        const getChatMessageHistory = () => {
            pageHistory(chatMessageSearchParam).then(res => {
                data.chatMessageHistory = res.data.records
                data.chatMessageHistoryTotal = res.data.total
            })
        }
        /**
         * 分页
         * @param value
         */
        const currentChange = (value) => {
            chatMessageSearchParam.page = value
            getChatMessageHistory()
        }

        onMounted(() => {
            chatRoomDetail()
        })
        return {
            data,
            currentChange
        }
    }
}
</script>

<style scoped>
.box-card {
    margin-top: 10px;
}

.page {
    margin-top: 10px;
    margin-left: 50%;
    margin-right: 50%;
}

.chat-avatar {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-bottom: 10px;
}
.chat-name{
    display: inline-block;
    vertical-align: middle;
}
</style>
